<!DOCTYPE html>
<html>
<head>
  <title>编辑用户 - 订单管理系统</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
    }
    
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
    }
    
    .form-card {
      width: 100%;
      max-width: 600px;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      background: white;
      margin: 20px auto;
    }
    
    .form-header {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      color: white;
      border-radius: 10px 10px 0 0;
      padding: 20px;
      text-align: center;
    }
    
    .form-body {
      padding: 30px;
    }
    
    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(67, 97, 238, 0.25);
    }
    
    .btn-submit {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      border: none;
      color: white;
      padding: 10px;
      font-weight: bold;
    }
    
    .btn-submit:hover {
      background: linear-gradient(120deg, var(--secondary-color), var(--primary-color));
      color: white;
    }
    
    #countryField {
      display: none;
    }
    
    #countryField.show {
      display: block;
    }
    
    .top-nav {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      padding: 10px 0;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav">
    <div class="container">
      <nav class="navbar navbar-expand navbar-dark">
        <div class="navbar-nav">
          <a class="nav-link" href="/"><i class="fas fa-home me-1"></i> 系统首页</a>
          <a class="nav-link" href="/orders"><i class="fas fa-list me-1"></i> 订单管理</a>
          <a class="nav-link" href="/customers"><i class="fas fa-users me-1"></i> 客户管理</a>
          {% if current_user and current_user.role == "root" %}
          <a class="nav-link" href="/users"><i class="fas fa-user-cog me-1"></i> 用户管理</a>
          {% endif %}
        </div>
      </nav>
    </div>
  </div>

  <div class="form-card">
    <div class="form-header">
      <h3>✏️ 编辑用户</h3>
      <p>订单管理系统</p>
    </div>
    <div class="form-body">
      {% if error %}
        <div class="alert alert-danger">{{ error }}</div>
      {% endif %}
      
      <form method="POST">
        <div class="mb-3">
          <label for="username" class="form-label">用户名</label>
          <input type="text" class="form-control" id="username" name="username" value="{{ user.username }}" readonly>
        </div>
        
        <div class="mb-3">
          <label for="email" class="form-label">邮箱</label>
          <input type="email" class="form-control" id="email" name="email" value="{{ user.email or '' }}">
        </div>
        
        <div class="mb-3">
          <label for="password" class="form-label">新密码 (留空则不更改)</label>
          <input type="password" class="form-control" id="password" name="password">
        </div>
        
        <div class="mb-3">
          <label for="role" class="form-label">角色</label>
          <select class="form-select" id="role" name="role" onchange="toggleCountryField()">
            <option value="user" {% if user.role == 'user' %}selected{% endif %}>普通用户</option>
            <option value="manager" {% if user.role == 'manager' %}selected{% endif %}>管理员</option>
            <!-- 移除root选项，禁止修改为root权限用户 -->
          </select>
        </div>
        
        <div class="mb-3" id="countryField">
          <label for="country" class="form-label">国家权限</label>
          <select class="form-select" id="country" name="country">
            <option value="">请选择国家</option>
            <option value="PL" {% if user.country == 'PL' %}selected{% endif %}>波兰 (PL)</option>
            <option value="CN" {% if user.country == 'CN' %}selected{% endif %}>中国 (CN)</option>
            <option value="US" {% if user.country == 'US' %}selected{% endif %}>美国 (US)</option>
            <option value="DE" {% if user.country == 'DE' %}selected{% endif %}>德国 (DE)</option>
            <option value="FR" {% if user.country == 'FR' %}selected{% endif %}>法国 (FR)</option>
            <option value="GB" {% if user.country == 'GB' %}selected{% endif %}>英国 (GB)</option>
            <option value="JP" {% if user.country == 'JP' %}selected{% endif %}>日本 (JP)</option>
            <!-- 可以添加更多国家 -->
          </select>
        </div>
        
        <div class="mb-3 form-check">
          <input type="checkbox" class="form-check-input" id="is_active" name="is_active" {% if user.is_active %}checked{% endif %}>
          <label class="form-check-label" for="is_active">账户启用</label>
        </div>
        
        <div class="d-grid">
          <button type="submit" class="btn btn-submit">更新用户</button>
          <a href="/users" class="btn btn-secondary mt-2">返回用户列表</a>
        </div>
      </form>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function toggleCountryField() {
      const roleSelect = document.getElementById('role');
      const countryField = document.getElementById('countryField');
      
      if (roleSelect.value === 'user') {
        countryField.classList.add('show');
      } else {
        countryField.classList.remove('show');
      }
    }
    
    // 初始化时根据当前角色显示国家字段
    document.addEventListener('DOMContentLoaded', function() {
      const roleSelect = document.getElementById('role');
      if (roleSelect.value === 'user') {
        document.getElementById('countryField').classList.add('show');
      }
    });
  </script>
</body>
</html>